<% const modBorder = ob.verifiedMod ? 'clrBrAlert2 clrBAlert2Grad' : 'clrBrInvis' %>

<div class="topControls flex js-closeClickTarget"></div>
<div class="js-closeClickTarget">
  <div class="flexColRows gutterV">
    <div class="contentBox mDetailWrapper padMd2 clrP clrBr clrSh3 tx5">
      <div class="flex gutterH row">
        <div class="flexNoShrink">
          <a class="userIcon disc clrBr2 clrSh1"
             style="<%= ob.getAvatarBgImage(ob.avatarHashes) %>"
             href="#<%= ob.peerID %>"></a>
        </div>
        <div>
          <div class="flex snipKids gutterHSm rowSm">
            <strong class="txt5"><%= ob.name %></strong>
            <span class="clrT2"><%= ob.handle ? `@${ob.handle}` : '' %></span>
          </div>
          <div class="row clrT2">
            <p><%=ob.moderatorInfo.description %></p>
          </div>
        </div>
      </div>
      <div class="js-socialBtns"></div>
    </div>
    <div class="contentBox mDetailWrapper flexRow flexVCent gutterH padMd2 clrP clrBr clrSh3">
      <div class="mDetail">
        <div class="flexCol flexCent">
          <div class="txCtr"><%= ob.parseEmojis('📍') %> <%= ob.location || ob.polyT('userPage.noLocation') %></div>
          <div class="txCtr tx5b clrT2"><%= ob.polyT('moderatorDetails.location') %></div>
        </div>
      </div>
      <div class="rowDivV clrBrBk TODO"></div>
      <div class="mDetail TODO">
        <div class="flexCol flexCent">
          <%= ob.parseEmojis('👍') %> XX<% // placeholder for reputation %>
          <div class="txCtr tx5b clrT2"><%= ob.polyT('moderatorDetails.recommendations') %></div>
        </div>
      </div>
      <div class="rowDivV clrBrBk"></div>
      <div class="mDetail">
        <div class="flexCol flexCent">
          <% var amount = ob.currencyMod.convertAndFormatCurrency(ob.moderatorInfo.fee.fixedFee.amount, ob.moderatorInfo.fee.fixedFee.currencyCode, ob.displayCurrency) %>
          <div class="txCtr"><%= ob.polyT(`moderatorCard.${ob.moderatorInfo.fee.feeType}`, { amount: amount, percentage: ob.moderatorInfo.fee.percentage }) %></div>
          <div class="txCtr tx5b clrT2"><%= ob.polyT('moderatorDetails.serviceCharge') %></div>
        </div>
      </div>
      <div class="rowDivV clrBrBk"></div>
      <div class="box mDetail verifiedWrapper <%= modBorder %> js-verifiedMod"></div>
    </div>
    <div class="contentBox mDetailWrapper padMd2 clrP clrBr clrSh3 tx5">
      <div class="rowMd">
        <h4><%= ob.polyT('moderatorDetails.currenciesSupported') %></h4>
        <div class="js-supportedCurrenciesList"></div>
      </div>
      <div class="rowLg">
        <h4><%= ob.polyT('moderatorDetails.languages') %></h4>
        <% ob.modLanguages.forEach(lang => { %>
          <div class="rowSm txSm"><%= lang %></div>
        <% }); %>
      </div>
      <div class="row">
        <h4><%= ob.polyT('moderatorDetails.termsOfService') %></h4>
        <p><%= ob.moderatorInfo.termsAndConditions %></p>
        <hr class="clrBr">
      </div>
      <div class="flexCol flexHCent gutterV">
        <% if (ob.cardState !== 'selected' && (!ob.ownMod || ob.purchase)) { %>
          <% if (ob.crypto.anySupportedByWallet(ob.moderatorInfo.acceptedCurrencies)) { %>
            <button class="btn clrP clrBr js-addAsModerator">
              <% if (ob.purchase) { %>
                <%= ob.polyT('purchase.chooseModerator') %>
              <% } else { %>
                <%= ob.polyT('moderatorDetails.addAsModeratorButton') %>
              <% } %>
            </button>
          <% } else { %>
            <strong>
              <%= ob.polyT('moderatorDetails.noCoinSupport')%>
            </strong>
          <% } %>
        <% } %>
        <div>
          <em class="tx6 clrT2"><%= ob.polyT('moderatorDetails.disclaimer') %></em>
        </div>
      </div>
    </div>
  </div>
</div>
